<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素拖曳插件</title>
    <style type="text/css">
        .move{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="move_container">
        <div class="move"></div>
    </div>
    <script>
        var moveElement=document.getElementsByClassName("move")[0];
        var dragging;
        var distX=0;
        var distY=0;
        moveElement.onmousedown=function (ev) {
            var Event=ev||window.event;
            distX=Event.clientX-moveElement.offsetLeft;
            distY=Event.clientY-moveElement.offsetTop;
            document.onmousemove=function (ev) {
                var Event=ev||window.event;
                var x=Event.clientX-distX;
                var y=Event.clientY-distY;
                if(x<0){
                    x = 0;
                }
                if(y<0)
                {
                    y = 0;
                }
                if(x>(document.documentElement.clientWidth-moveElement.offsetWidth)){
                    x=document.documentElement.clientWidth-moveElement.offsetWidth;
                }
                moveElement.style.left=x+"px";
                moveElement.style.top=y+"px";
            }
            document.onmouseup=function () {
                document.onmousemove=null;
                document.onmouseup=null;
            }
        }
    </script>
</body>
</html>